﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js横向二级导航菜单slide往下滑动动画效果js代码下载</title>
<meta name="description" content="js导航菜单制作一个蓝色横向二级导航菜单，鼠标滑过slide滑动动画效果显示二级导航菜单。内含js代码下载。兼容IE6-8,firefox等主流浏览器" />
</head>

<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
body{font-family:Arial, Helvetica, sans-serif;font-size:14px;background-color:#fff;}
/*导航菜单*/
#nav{width:950px;margin:20px auto;height:40px;line-height:40px;background:url('images/nav-bg.png');display:block;overflow:hidden;}
#navMenu ul{width:950px;float:left;height:40px;}
#navMenu li{float:left;font-size:14px;}
#navMenu li a{color:#fff!important;text-decoration:none;width:91px;height:40px;line-height:40px;text-align:center;background-image:url('images/navbg.png');display:block;}
#navMenu li a.last{width:92px;}
#navMenu li a.current{background-position:0 -80px;width:91px;height:40px;line-height:40px;text-align:center;display:block;color:#fff;}
#navMenu li a:hover{background-position:0 -40px;}
/*-------- 下拉菜单 --------------*/
.dropMenu{position:absolute;top:0;z-index:100;visibility:hidden;margin-top:-2px;border:1px solid #0e2c5e;border-top:0;background-color:#cbdef4;padding:4px;width:260px;}
.dropMenu li{float:left;width:130px;height:32px;}
.dropMenu li a{display:block;padding:5px 0 5px 12px;color:#0f335d;}
.dropMenu a:hover{text-decoration:underline;color:#000;}
</style>

	<div id="nav">
		<ul id="navMenu">
			<li><a href='http://www.jsfoot.com/'>首页</a></li>
			<li><a href='http://www.jsfoot.com/jquery/' rel='dropmenu1'>jquery 特效</a></li>
			<li><a href='http://www.jsfoot.com/js/' rel='dropmenu2'>js特效</a></li>
			<li><a class="current" href='http://www.jsfoot.com/flash/' rel='dropmenu3'>flash特效</a></li>
			<li><a href='http://www.jsfoot.com/css3/' rel='dropmenu4'>div+css教程</a></li>
			<li><a class="last" href='http://www.jsfoot.com/html5/' rel='dropmenu5'>html5教程</a></li>
		</ul>
	</div>

	<script type='text/javascript' src='js/dropdown.js'></script>

	<ul id="dropmenu1" class="dropMenu">
		<li><a href="http://www.jsfoot.com/jquery/images/">jquery图片特效</a></li>
		<li><a href="http://www.jsfoot.com/jquery/menu/">jquery导航菜单</a></li>
		<li><a href="http://www.jsfoot.com/jquery/xxk/">jquery选项卡特效</a></li>
		<li><a href="http://www.jsfoot.com/jquery/letter/">jquery文字特效</a></li>
		<li><a href="http://www.jsfoot.com/jquery/form/">jquery表单特效</a></li>
		<li><a href="http://www.jsfoot.com/jquery/table/">jquery表格特效</a></li>
	</ul>
	<ul id="dropmenu2" class="dropMenu">
		<li><a href="http://www.jsfoot.com/js/images/">js图片特效</a></li>
		<li><a href="http://www.jsfoot.com/js/menu/">js导航菜单</a></li>
		<li><a href="http://www.jsfoot.com/js/xxk/">js选项卡特效</a></li>
		<li><a href="http://www.jsfoot.com/js/letter/">js文字特效</a></li>
		<li><a href="http://www.jsfoot.com/js/form/">js表单特效</a></li>
		<li><a href="http://www.jsfoot.com/js/table/">js表格特效</a></li>
	</ul>
	<ul id="dropmenu3" class="dropMenu">
		<li><a href="http://www.jsfoot.com/flash/images/">flash图片特效</a></li>
		<li><a href="http://www.jsfoot.com/flash/menu/">flash导航菜单</a></li>
		<li><a href="http://www.jsfoot.com/flash/letter/">flash文字特效</a></li>
	</ul>
	<ul id="dropmenu4" class="dropMenu">
		<li><a href="http://www.jsfoot.com/css3/layout/">div+css布局</a></li>
		<li><a href="http://www.jsfoot.com/css3/menu/">div+css菜单</a></li>
		<li><a href="http://www.jsfoot.com/css3/css3/">css3教程</a></li>
	</ul>
	<ul id="dropmenu5" class="dropMenu">
		<li><a href="http://www.jsfoot.com/html5/tx/">html5特效</a></li>
		<li><a href="http://www.jsfoot.com/html5/tb/">html5图表</a></li>
	</ul>
	
	<script type="text/javascript">cssdropdown.startchrome("navMenu")</script> 

</body>
</html>
